<template>
  <div class="app-container">
    <el-button type="primary" round @click="addRole">添加角色</el-button>
    <el-table
      :data="tableData"
      style="width: 70%; margin: 30px auto"
      :border="true"
      :stripe="true"
      max-height="250"
    >
      <el-table-column
        prop="role"
        label="英文角色名"
      />
      <el-table-column
        prop="role_zh"
        label="中文角色名"
      />
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope, tableData)"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增角色" :visible.sync="show">
      <el-form
        :model="form"
      >
        <el-form-item
          label="英文角色名"
          label-width="80"
        >
          <el-input v-model="form.role" />
        </el-form-item>
        <el-form-item
          label="中文角色名"
          label-width="80"
        >
          <el-input v-model="form.role_zh" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      form: {
        role: '',
        role_zh: ''
      },
      tableData: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$role.fetchRoleList().then(res => {
        this.tableData = res.data
      })
    },
    deleteRow(scope, rows) {
      const { _id } = scope.row
      this.$role.fetchDelRole({ _id }).then(res => {
        this.$message({ type: 'success', message: res.msg })
        console.log(res)
      })
      rows.splice(scope.$index, 1)
    },
    addRole() {
      this.show = true
    },
    submit() {
      if (!this.form.role || !this.form.role_zh) return this.$message({ message: '字段缺失', type: 'warning' })
      this.$role.fetchAddRole(this.form).then(res => {
        console.log(res)
        this.$message({ type: 'success', message: '添加成功' })
        this.init()
        this.show = false
      })
    }
  }

}
</script>

<style>

</style>
